<template>
    <Header />
    <div class="content">
        <Post />
        <div class="search-container">
            <el-select v-model="category_id" placeholder="请选择选项" class="search-select">
                <el-option label="请选择" value=""></el-option> <!-- 添加空选项 -->
                <el-option v-for="category in selectedOption" :key="category.id" :label="category.name"
                    :value="category.id">
                </el-option>
            </el-select>
            <el-input placeholder="请输入关键词" v-model="searchname" clearable @keyup.enter="getData" class="search-input">
                <template #append>
                    <el-button @click="getData" class="search-button">搜索</el-button>
                </template>
            </el-input>
        </div>
        <el-row :gutter="15" class="content_item">
            <el-col :span="24">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Dish">
                                    <Dish />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>美食列表</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <div class="food-list">
                        <template v-if="loading">
                            <div v-for="n in 12" :key="n" class="food-item">
                                <el-card class="food-card">
                                    <el-skeleton :rows="4" animated />
                                </el-card>
                            </div>
                        </template>
                        <template v-else>
                            <div v-for="(food, index) in foodList" :key="index" class="food-item">
                                <el-card class="food-card">
                                    <el-image :src="`http://localhost/storage/${food.image}`"
                                        :preview-src-list="[`http://localhost/storage/${food.image}`]" :zoom-rate="1.2"
                                        :max-scale="7" :min-scale="0.2" :initial-index="0" fit="cover" alt="美食图片"
                                        class="food-image" />
                                    <div class="food-details">
                                        <div @click="$router.push({ name: 'foodDetail', params: { id: food.id } })">
                                            <div class="title">
                                                <h2>
                                                    <el-tag>{{ food.category_name }}</el-tag>
                                                    {{ food.title }}
                                                </h2>
                                            </div>
                                            <div class="recommendation">
                                                <span>推荐系数:
                                                    <el-rate v-model="food.score" disabled show-score
                                                        text-color="#ff9900" :score-template="`${food.score} 分`" />
                                                </span>
                                            </div>

                                        </div>
                                        <div class="favorites">
                                            <span>收藏量：{{ food.collect_count }} </span>
                                            
                                            <span>评价人数：{{ food.score_count }}</span>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </template>
                    </div>
                    <!-- 分页组件 -->
                    <div style="display: flex; justify-content: center; margin-top: 20px;">
                        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                            :current-page="currentPage" @current-change="handlePageChange" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <Top />
    </div>
    <Footer />
</template>
<script setup>
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';
import Post from '~/components/Post.vue';
import Top from '~/components/Top.vue';
import { getfoodlist } from '~/api/food';
import { getcategory } from '~/api/release';
import { ref, reactive } from 'vue';

// 分页相关的数据

const total = ref(0); // 总条数
const pageSize = ref(12); // 每页显示条数
const currentPage = ref(1); // 当前页码
const searchname = ref('');
const category_id = ref('')
const foodList = ref([]);
const loading = ref(true);
const state = reactive({ category: '美食' });
const selectedOption = ref([])
getcategory(state).then(res => {
    selectedOption.value = res.categories
})

const getData = () => {
    loading.value = true;
    getfoodlist(currentPage.value, pageSize.value, searchname.value, category_id.value).then((res) => {
        foodList.value = res.foodlist;
        total.value = res.total;
        loading.value = false;
    });
}
getData()
// 分页改变时触发的方法
const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    getData();
};
</script>
<style scoped>
.content {
    margin: 20px auto;
    width: 1024px;
}

.Dish {
    color: hsl(64, 100%, 50%);
}

.el-icon {
    width: 40px;
    height: auto;
}

.el-icon svg {
    height: 40px;
    width: 40px;
}

.content_item {
    margin-bottom: 20px;
}

/* 头部样式 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.icon-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* 搜素样式 */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 10px;

    border-radius: 8px;

}

.search-select {
    width: 200px;
    margin-right: 10px;
}

.search-input {
    flex-grow: 1;
}

.search-button {
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #66b1ff;
}

/* 美食列表样式 */
.food-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.food-item {
    flex: 1 1 calc(25% - 15px);
    /* 每行显示3个美食项 */
    width: calc(25% - 15px);
    /* 固定宽度 */
    height: 350px;
    /* 固定高度 */
}

.food-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    /* 卡片高度与 .food-item 一致 */
}

.food-image {
    width: 200px;
    border-radius: 10px;
    height: 150px;
    /* 图片高度固定 */
    object-fit: cover;
    /* 保持图片比例并填充容器 */
}

.food-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    /* 剩余空间自动分配给详情部分 */
}

.favorites {
    display: flex;
    line-height: 32px;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.favorites .el-icon {
    width: 16px;
}

.recommendation {
    margin-top: 10px;
}

.title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
}
</style>